<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        .box{
            display: flex;
            flex-direction: row;
        }
        .cbox{
            width: 200px;
            border: 1px solid black;
            margin: 0px 10px;
            padding: 8px;
        }
        .btn{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .item{
            background-color: #dedede;
            margin-bottom: 10px;
            padding: 10px;
            cursor: pointer;
        }
        .item.active{
            background-color: brown;
            color: white;
        }
    </style>
    <script>
        // 点击.item元素时，如果有active样式则删除，没有添加
        // 点击中间按钮，基于方向移动有active的元素，移动完成后删除激活状态
        //          -- 元素基于内容 升序
        // tips : 标签元素和JS DOM 对象是一一对应的
        window.onload = function (){
            let leftBox = document.querySelector("#leftBox");
            for (let i = 0; i < 5; i++) {
                let divItem = document.createElement("div");
                divItem.classList.add("item");
                divItem.textContent = `元素${i+1}`;
                divItem.onclick = function (){
                    divItem.classList.toggle("active")
                }
                leftBox.appendChild(divItem)
            }
        }
        function moveItem(){
            let leftBox = document.querySelector("#leftBox");
            let rightBox = document.querySelector("#rightBox");
            // 页面元素和DOM对象的一一对应，可以实现通过js移动DOM，在页面中呈现删除添加的整套流程
            // let divItem = leftBox.querySelector(".active");
            // rightBox.appendChild(divItem);
            let divItemList = leftBox.querySelectorAll(".active");
            for (let dom of divItemList) {
                dom.classList.remove("active")
                rightBox.appendChild(dom);
            }
        }
        function moveItemTo(fromId,toId){
            let fromBox = document.querySelector(fromId);
            let toBox = document.querySelector(toId);
            let divItems = fromBox.querySelectorAll(".active");

            // for (let dom of divItems) {
            //     dom.classList.remove("active")
            //     toBox.appendChild(dom);
            // }
            // let items = toBox.querySelectorAll(".item")
            // console.log(items)

            // ES6 提供的新方法 Array.from ，将类数组集合转换为一个普通数组
            // console.log( Array.from(items) )
            let items = Array.from( toBox.querySelectorAll(".item") );
            items = items.concat( Array.from(divItems) )
            toBox.innerHTML = "";
            items = items.sort( (item1,item2)=>{
                item1.classList.remove("active")
                item2.classList.remove("active")
                let flag = item1.textContent >= item2.textContent
                return flag?1:-1;
            })
            for (let dom of items) {
                toBox.appendChild(dom);
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="cbox" id="leftBox">
<!--            <div class="item active">元素1</div>-->
<!--            <div class="item">元素2</div>-->
<!--            <div class="item">元素3</div>-->
<!--            <div class="item">元素4</div>-->
<!--            <div class="item">元素5</div>-->
        </div>
        <div class="btn">
<!--            <input type="button" value=">>" onclick="moveItem()">-->
            <input type="button" value=">>" onclick="moveItemTo('#leftBox','#rightBox')">
            <input type="button" value="<<" onclick="moveItemTo('#rightBox','#leftBox')">
        </div>
        <div class="cbox" id="rightBox"></div>
    </div>
</body>
</html>